import { useCallback, useEffect, useState, } from 'react';
import { Link } from 'react-router-dom';
import cls from 'classnames';
import { LongButton } from 'components/Button';
import Carousel from 'components/Carousel';
import {
  Quiet,
  SuperSensitive,
  SecretPlayer,
  ShinyDancer,
  HopefullDreamer,
} from 'assets/mv-cover';
import {
  Ava,
  Bella,
  Carol,
} from 'assets/tachie';
import CircledArrow from 'assets/circled-arrow.png';
import { translate as $ } from 'utils';
import config from 'config';
import BW2021 from 'assets/bw-2021-mini.jpg'
import QA from 'assets/weekly-qa.png'
import styles from './contents.module.scss';

const { paths } = config;

export const MuseumArtContent = () => {
  return (
    <div className={styles.art}>
      <div className={cls(styles.artContent, styles.content)}>
        <div className={styles.artCover}>
          <img src={BW2021} alt="BW2021" />
        </div>
        <p className={cls(styles.artDetail, styles.detail)}>{$('在这里你可以找到官方发布的美图哦。')}</p>
      </div>
      <div className={cls(styles.artFoot, styles.sectFoot)}>
        <Link to={paths.ART_GALLARY}>
          <LongButton>{$('欣赏更多')}</LongButton>
        </Link>
      </div>
    </div>
  )
}

const MUSIC_LIST = [
  {
    name: 'quiet',
    cover: Quiet,
    display: 'Quiet',
  },
  {
    name: 'supersensitive',
    cover: SuperSensitive,
    display: '超级敏感',
  },
  {
    name: 'secretplayer',
    cover: SecretPlayer,
    display: 'Secret Player',
  },
  {
    name: 'shinydancer',
    cover: ShinyDancer,
    display: 'Shiny Dancer',
  },
  {
    name: 'hopefulldreamer',
    cover: HopefullDreamer,
    display: 'Hopefull Dreamer',
  },
]

export const MuseumMusicContent = () => {
  const [w, setW] = useState(document.body.clientWidth);

  useEffect(() => {
    const handler = () => {
      setW(document.body.clientWidth);
    };
    document.body.addEventListener('resize', handler);
    return () => document.body.removeEventListener('resize', handler);
  }, []);

  const refreshW = useCallback(() => {
    console.log(document.body.clientWidth);
    setW(document.body.clientWidth);
  }, [document.body.clientWidth]);

  return (
    <div className={styles.music}>
      <div className={cls(styles.musicContent, styles.content)}>
        <Carousel
          className={styles.musicSlides}
          activeStyle={{
            transform: 'scale(1.3)',
          }}
          onClick={refreshW}
        >
          {MUSIC_LIST.map(({ name, cover, display, }) => (
            <li
              className={styles.slideItem}
              key={name}
              style={{
                width: `${w * 0.4}px`,
                height:  `${w * 0.4}px`,
              }}
            >
              <img src={cover} alt={name}/>
              <div className={styles.slideShadow}>
                <div className={styles.playButton}>
                  <div></div>
                  <div></div>
                </div>
              </div>
            </li>
          ))}
        </Carousel>
        <p className={styles.songName}>Quite</p>
        <p className={cls(styles.musicDetail, styles.detail)}>
          {$('官方发布的音乐都可以在这找到哦。')}
        </p>
      </div>
      <div className={cls(styles.musicFoot, styles.sectFoot)}>
        <Link to={paths.MUSIC_HALL}>
          <LongButton>{$('聆听更多')}</LongButton>
        </Link>
      </div>
    </div>
  )
}

export const MuseumStoreContent = () => {
  return (
    <div className={styles.store}>
      <div className={cls(styles.storeContent, styles.content)}>
        <p className={cls(styles.storeDetail, styles.detail)}>{$('官方周边在这里！！！')}</p>
        <div className={styles.storeCover}>
          <ul className={styles.storeItems}>
            <li className={styles.storeItemCover}>
              <img src={Bella} alt={$('Bella')}/>
            </li>
            <li className={styles.storeItemLink}>
              <p>{$('贝拉立牌')}</p>
              <img src={CircledArrow} alt={$('arrow')} />
            </li>
            <li className={styles.storeItemCover}>
              <img src={Carol} alt={$('Carol')}/>
            </li>
          </ul>
          <ul className={styles.storeItems}>
            <li className={styles.storeItemLink}>
              <p>{$('向晚立牌')}</p>
              <img src={CircledArrow} alt={$('arrow')} />
            </li>
            <li className={styles.storeItemCover}>
              <img src={Ava} alt={$('Ava')}/>
            </li>
            <li className={styles.storeItemLink}>
            </li>
          </ul>
        </div>
      </div>
      <div className={cls(styles.storeFoot, styles.sectFoot)}>
        <Link to={paths.STORE}>
          <LongButton noRound={true}>{$('花更多钱')}</LongButton>
        </Link>
      </div>
    </div>
  )
}

export const MuseumQAContent = () => {
  return (
    <div className={styles.qa}>
      <div className={cls(styles.qaContent, styles.content)}>
        <div className={styles.qaCover}>
          <img src={QA} alt="QA" />
          <p>{$('本周QA')}</p>
        </div>
        <p className={cls(styles.qaDetail, styles.detail)}>{$('在这里尽情地鞭策阿草吧！')}</p>
      </div>
      <div className={cls(styles.qaFoot, styles.sectFoot)}>
        <Link to={paths.QA}>
          <LongButton>{$('查询更多')}</LongButton>
        </Link>
      </div>
    </div>
  )
}
